<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用圆角边框绘制图形</title>

        <style>
            .wrapper{
                margin: 20px auto;
                width: 0;
                height: 0;
            }
            .first{
                border-left:100px solid red ;
                border-bottom: 100px solid yellow;
                border-top: 100px solid blue;
                border-right: 100px solid green;
                border-radius:50px ;
            }
            .second{
                border-left:100px solid red ;
                border-bottom: 100px solid yellow;
                border-top: 100px solid blue;
                border-right: 100px solid green;
                border-radius:100px ;
            }
            .third{
                border-left:100px solid transparent ;
                border-bottom: 100px solid yellow;
                border-top: 100px solid blue;
                border-right: 100px solid transparent;
                border-radius:100px ;
            }

        </style>

    </head>
    <body>

    <div class="wrapper first"></div>
    <div class="wrapper second"></div>
    <div class="wrapper third"></div>
    </body>
</html>